<template>
  <div>
    <p>lists: {{ lists }}</p>
    <p>num: {{ num }} - {{ numStr }}</p>
    <button @click="setNum">setNum</button>
    <Com.Three
      @getlists="receiveData"
      a="10"
      b="20"
      name="小王"
      age="22"
      ref="obj"
    >
      <template #default>
        <a href="#">默认插槽</a>
      </template>
      <template #header123>
        <a href="#">具名插槽</a>
      </template>
    </Com.Three>
    <!-- <Com.One></Com.One>
    <Com.Two></Com.Two> -->
  </div>
</template>

<script setup>
// 注意：<script setup>它内部的代码最终还是被编译到setup(){}中了，只是这是setup(){}函数的语法糖，使用更加方便而已。
import { ref, reactive, computed, provide } from "vue";
// 3. defineProps: 它是让子组件使用的，声明props属性的，因为 <script setup> 不再提供配置项了。
// 4. useAttrs: 它主要是保存子组件没有声明但是父组件传递的prop值。
// 5. defineExpose: 它主要是在子组件内部使用，让子组件向父组件暴漏属性和方法，让父组件直接调用。

// 2. 组件直接导入即可，不需要在 components: {} 里面注册了。
// import Three from "@/components/Three";
import * as Com from "@/modules/coms.js";

// 1. 在顶层声明的变量、函数、以及import导入组件，不需要再return或者注册子组件，组件模板中可以直接使用。

const obj = ref(); // obj代表的是子组件的实例对象了
const num = ref(1);
const numStr = computed(() => `数值是: ${num.value}`);
const setNum = () => {
  num.value++;
  console.log("====", obj.value.aaa);
  console.log("====", obj.value.bbb);
  obj.value.testFun();
};
provide("uname", num);
provide("uage", numStr);

const lists = ref("");
const receiveData = data => {
  console.log("父组件收到数据: ", data);
  lists.value = data;
  console.log(lists);
};
</script>
